<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="名称">
            <el-input v-model="search.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="选择客户">
            <el-select v-model="search.customerId" placeholder="选择客户">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in customers" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择联系人">
            <el-select v-model="search.contactsId" placeholder="选择联系人">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in contacts" :label="item.fullName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择交易阶段">
            <el-select v-model="search.stage" placeholder="选择交易阶段">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in stages" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择来源">
            <el-select v-model="search.source" placeholder="选择来源">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in sources" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="拥有者">
            <el-select v-model="search.owner" placeholder="拥有者">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initData">查询</el-button>
            <el-button type="primary" @click="openDialog()">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="trans"
            border
            style="width: 100%">
        <el-table-column
                prop="tranname"
                label="交易名称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="customername"
                label="客户名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="contactname"
                label="联系人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="stage"
                label="交易阶段"
                width="120">
        </el-table-column>
        <el-table-column
                prop="source"
                label="来源"
                width="300">
        </el-table-column>
        <el-table-column
                prop="username"
                label="拥有者"
                width="120">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="toDetail(scope.row.id)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="openDialog(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
 <!--市场活动弹框-->
    <!--市场活动列表的弹框-->
    <el-dialog title="市场活动" :visible.sync="dialogTableVisible">
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="活动名称">
                <el-input v-model="search.name" placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item label="拥有者">
                <el-select v-model="search.owner" placeholder="拥有者">
                    <el-option label="--请选择--" value=""></el-option>
                    <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                        v-model="search.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                        v-model="search.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAllActivity">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="activitys"
                border
                style="width: 100%"
                @current-change="chooseOne"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
                <template slot-scope="scope">
                    <el-radio v-model="tran.activityId" :label="scope.row.id">{{""}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="活动名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="ownerUser.name"
                    label="拥有者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="startDate"
                    label="开始日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="endDate"
                    label="结束日期"
                    width="120">
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <div>
            <el-button type="success" @click="chooseActivity">确定</el-button>
        </div>
    </el-dialog>
    <!--添加/编辑的弹框-->
    <el-dialog title="交易维护" :visible.sync="dialogFormVisible">
        <el-form :model="tran">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="tran.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="拥有者" :label-width="formLabelWidth">
                <el-select v-model="tran.owner" placeholder="拥有者">
                    <el-option label="--请选择--" value=""></el-option>
                    <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="金额" :label-width="formLabelWidth">
                <el-input v-model="tran.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预计成交日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="tran.expectedDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="客户" :label-width="formLabelWidth">
                <el-select v-model="tran.customerId" placeholder="选择客户">
                    <el-option v-for="item in customers" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系人" :label-width="formLabelWidth">
                <el-select v-model="tran.contactsId" placeholder="选择联系人">
                    <el-option label="--请选择--" value=""></el-option>
                    <el-option v-for="item in contacts" :label="item.fullName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="阶段" :label-width="formLabelWidth">
                <el-select v-model="tran.stage" placeholder="选择交易阶段">
                    <el-option label="--请选择--" value=""></el-option>
                    <el-option v-for="item in stages" :label="item.text" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="来源" :label-width="formLabelWidth">
                <el-select v-model="tran.source" placeholder="选择来源">
                    <el-option v-for="item in sources" :label="item.text" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易类型" :label-width="formLabelWidth">
                <el-select v-model="tran.type" placeholder="选择来源">
                    <el-option v-for="item in types" :label="item.text" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择市场活动" :label-width="formLabelWidth">
                <el-button class="el-icon-search" @click="dialogTableVisible=true">市场活动</el-button>
                <el-input v-model="tran.activityName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="tran.description"></el-input>
            </el-form-item>
            <el-form-item label="联系纪要" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="tran.contactSummary"></el-input>
            </el-form-item>
            <el-form-item label="下次联系时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="tran.nextContactTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveTran">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible:false,
            formLabelWidth:"120px",
            tran:{//添加/编辑交易对象
               id:undefined,
               owner:undefined,
               money:undefined,
               name:undefined,
               expectedDate:undefined,
               customerId:undefined,//客户id
               stage:undefined,//交易阶段
               type:undefined,
               source:undefined,//来源
               activityId:undefined,
               activityName:undefined,
               contactsId:undefined,//联系人
               createBy:undefined,
               editBy:undefined,
               description:undefined,
               contactSummary:undefined,
                nextContactTime:undefined,
            },
            search:{
                name:undefined,
                customerId:undefined,
                contactsId:undefined,
                stage:undefined,
                source:undefined,
                owner:undefined
            },
            trans:[],
            pageNum: 1,
            pageSize:5,
            total:undefined,
            customers:[],//所有的客户
            contacts:[], //客户下的联系人
            stages:[], //所有的交易阶段
            sources:[],//所有的来源
            types:[],//交易的类型
            users:[], //所有的拥有者
            activitys:[],//所有的市场活动
            pageNum:1,
            pageSize:5,
            total:undefined,
            dialogTableVisible:false,
            search:{//搜索条件
                name:undefined,
                owner:undefined,
                startDate:undefined,
                endDate:undefined
            }
        },
        methods: {
            openDialog(id){//打开修改和添加的弹框
                this.dialogFormVisible=true;
                if (id){//修改
                    axios.get(`/tran/getOriginById?id=${id}`).then(resp=>{
                        let data=resp.data;
                        this.tran={...data.result};
                        //设置修改人的id
                        this.tran.editBy=JSON.parse(sessionStorage.getItem("user")).id;
                    })
                }else{//添加
                    this.tran={//添加/编辑交易对象
                        id:undefined,
                        owner:undefined,
                        money:undefined,
                        name:undefined,
                        expectedDate:undefined,
                        customerId:undefined,//客户id
                        stage:undefined,//交易阶段
                        type:undefined,
                        source:undefined,//来源
                        activityId:undefined,
                        contactsId:undefined,//联系人
                        createBy:undefined,
                        editBy:undefined,
                        description:undefined,
                        contactSummary:undefined,
                    }
                    //创建人id
                    this.tran.createBy=JSON.parse(sessionStorage.getItem("user")).id;

                }
            },
            saveTran(){//保存交易
                axios({
                    method:this.tran.id?"put":"post",
                    url:"/tran",
                    data:this.tran
                }).then(resp=>{
                    if (resp.data.code==200){
                        this.$message({
                            type:"success",
                            message:"操作成功"
                        });
                        this.dialogFormVisible=false;
                        //舒心表格数据
                        this.initData();
                    }
                })
            },
            toDetail(id){//跳转详情页面
                sessionStorage.setItem("id",id);
                location.href="detail.html";
            },
            initData(){
                axios.get("/tran",{params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        ...this.search
                    }}).then(resp=>{
                        let data=resp.data;
                        this.trans=data.result;
                        this.total=data.count
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initData()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.initData();
            },
            getAllCustomer(){//获取所有的客户
                axios.get("/customer?pageSize=1000000").then(resp=>{
                    let data=resp.data;
                    this.customers=data.result
                })
            },
            getAllStage(){//获取所有的交易阶段
                axios.get("/value/getDicValueByCode?code=tran_stage").then(resp=>{
                    let data=resp.data;
                    this.stages=data.result;
                })
            },
            getAllSource(){//获取所有的来源
                axios.get("/value/getDicValueByCode?code=clue_source").then(resp=>{
                    let data=resp.data;
                    this.sources=data.result;
                })
            },
            getAllType(){//获取所有的交易类型
                axios.get("/value/getDicValueByCode?code=tran_type").then(resp=>{
                    let data=resp.data;
                    this.types=data.result;
                })
            },
            getAllUser(){//获取所有的用户,拥有者
                axios.get("/user").then(resp=>{
                    let data=resp.data;
                    this.users=data.result
                })
            },
            chooseActivity(){//点击确定选中市场活动
                this.dialogTableVisible=false
            },
            chooseOne(val) {//单选的点击事件
                console.log(val);
                this.tran.activityId=val.id
                this.tran.activityName=val.name;
                // this.dialogTableVisible=false
            },
            getAllActivity(){//获取表格数据
                axios.get("/activity",{params:{
                        pageNum:this.pageNum,
                        pageSize: this.pageSize,
                        ...this.search
                    }}).then(resp=>{
                    let data=resp.data;
                    this.activitys=data.result;
                    this.total=data.count
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.getAllActivity();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.getAllActivity();
            }
        },
        created(){
            this.initData();
            this.getAllCustomer();
            this.getAllStage();
            this.getAllType();
            this.getAllSource();
            this.getAllUser();
            this.getAllActivity();
        },
        watch:{//监听器
            "search.customerId":function (newV,oldV){
                axios.get(`/contact/getContactsByCustomerId?customerId=${newV}`).then(resp=>{
                    let data=resp.data;
                    this.contacts=data.result;
                    this.search.contactsId=data.result[0]?data.result[0].id:""//选中了客户之后,自动选中客户中第一个联系人
                })

            },
            "tran.customerId":function (newV,oldV){
                axios.get(`/contact/getContactsByCustomerId?customerId=${newV}`).then(resp=>{
                    let data=resp.data;
                    this.contacts=data.result;
                    this.tran.contactsId=data.result[0]?data.result[0].id:""//选中了客户之后,自动选中客户中第一个联系人
                })

            }
        }
    })
</script>
</body>
</html>